<script setup>
import {onLoad} from '@dcloudio/uni-app';
import {ref, inject} from 'vue';

const isMiniProgram = inject('isMiniProgram');

const index = ref('');
const title = ref('');
const selectedItemIndex = ref(0);


const bookTabsitems = [
  {id: 1, name: '热门书籍'},
  {id: 2, name: '科学书籍'},
  {id: 3, name: '文化书籍'},
  {id: 4, name: '经济书籍'},
  {id: 5, name: '经济书籍'},
  {id: 6, name: '经济书籍'}
];

const bookImg = [
  {
    id: 1,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '百年孤独',
    author: '马尔克斯'
  },
  {
    id: 2,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '活着',
    author: '余华'
  },
  {
    id: 3,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '小王子',
    author: '圣埃克苏佩里'
  },
  {
    id: 4,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '挪威的森林',
    author: '村上春树'
  },
  {
    id: 5,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '红楼梦',
    author: '曹雪芹'
  },
  {
    id: 6,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '围城',
    author: '钱钟书'
  },
  {
    id: 7,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '三体',
    author: '刘慈欣'
  },
  {
    id: 8,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '1984',
    author: '乔治·奥威尔'
  },
  {
    id: 9,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '白夜行',
    author: '东野圭吾'
  },
  {
    id: 10,
    image: 'https://pica.zhimg.com/80/v2-23c14209922e3f4d2d18bce89a256171_1440w.webp?source=1def8aca',
    name: '追风筝的人',
    author: '卡勒德·胡赛尼'
  }
];

onLoad((opsition) => {
  console.log(opsition);
  index.value = opsition.index;
  title.value = opsition.title
});

const leftClick = () => {
  uni.navigateBack();
};

const selectItem = (item, index) => {
  selectedItemIndex.value = index;
};

const bookTopClick = (item) => {
  uni.navigateTo({
    url: '/pages/AI/components/AI-video-content?id=' + item.id + '&title=' + item.name,
  })
};

</script>

<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view style="width: 160rpx;">{{ title }}</view>
      <view :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" class="lable-box">
        <div class="top-img">
          <image class="image-top" src="/static/index/top-lable.svg"/>
        </div>
        <text>我的作品</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="AI-book">
    <view class="sreach-box">
      <fui-icon :size="30" color="#999999" name="search"></fui-icon>
      <text>请输入需要搜索的课程</text>
    </view>
    <view class="book-scroll">
      <scroll-view :scroll-with-animation="true" class="scroll-view-content" scroll-x>
        <view v-for="(item, index) in bookTabsitems" :key="index" :class="{ 'selected': selectedItemIndex === index }"
              class="scroll-item" @click="selectItem(item, index)">
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
    <view class="book-img-box">
      <scroll-view :scroll-with-animation="true" class="scroll-item-book" scroll-x>
        <view v-for="(item, index) in bookImg" :key="index" class="scroll-item-img" @click="bookTopClick(item)">
          <view class="book-img-item">
            <image :src="item.image" class="book-item-image"/>
            <view class="book-name">{{ item.name }}</view>
            <view class="book-author">作者：{{ item.author }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="book-content">
      <fui-grid :showBorder="false" :square="false">
        <fui-grid-item v-for="(item, index) in bookImg" :key="index" @click="bookTopClick(item)">
          <view class="fui-grid__cell fui-padding" style="margin: 15rpx;">
            <image :src="item.image" class="connt-image"/>
            <view class="connt-top">{{ item.name }}</view>
            <view class="connt-bot">作者：{{ item.author }}</view>
          </view>
        </fui-grid-item>
      </fui-grid>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lable-box {
    width: 212rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;

    .top-img {
      margin: 0 10rpx 0 35rpx;

      .image-top {
        width: 36rpx;
        height: 36rpx;
      }
    }

    text {
      font-size: 25rpx;
      color: #666666;
    }
  }
}

.AI-book {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .sreach-box {
    width: 670rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      width: 80%;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .book-scroll {
    margin: 20rpx;
    width: 100%;
    height: 70rpx;
    overflow: hidden;

    .scroll-view-content {
      white-space: nowrap;

      .scroll-item {
        width: 136rpx;
        height: 58rpx;
        border-radius: 12rpx;
        display: inline-block;
        text-align: center;
        line-height: 58rpx;
        font-size: 24rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
        background-color: rgba(18, 134, 140, 0.1);
        margin-right: 20rpx;
        cursor: pointer;
        overflow: hidden;
      }

      .selected {
        background-color: rgba(18, 134, 140, 1);
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .book-img-box {
    margin: 20rpx;
    width: 100%;
    height: 418rpx;

    .scroll-item-book {
      white-space: nowrap;

      .scroll-item-img {
        width: 240rpx;
        height: 418rpx;
        display: inline-block;
        margin-right: 20rpx;

        .book-img-item {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          .book-item-image {
            width: 240rpx;
            height: 320rpx;
            border-radius: 28.8rpx;
            overflow: hidden;
          }

          .book-name {
            font-weight: 600;
            font-size: 28rpx;
            color: rgba(18, 134, 140, 1);
          }

          .book-author {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }
  }

  .book-content {
    margin: 20rpx;
    width: 100%;

    .fui-grid__cell {
      .connt-image {
        width: 210rpx;
        height: 280rpx;
        border-radius: 26rpx;
        overflow: hidden;
      }

      .connt-top {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
      }

      .connt-bot {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
}
</style>